<template>
  <!-- 费用 -->
  <div>
    <span v-if="readonly">{{ selectData }}</span>
    <el-select
      v-else
      v-model="checkedData"
      :disabled="readonly"
      filterable
      remote
      reserve-keyword
      :placeholder="$t('请输入编号或名称')"
      @change="changeData"
    >
      <el-option
        v-for="item in options"
        :key="item.costCode"
        :label="item.costCode + item.costName"
        :value="item.costCode"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
import nonStandardService from '@/services/nonStandardService'
import eventBus from '@/assets/utils/eventBus.js'
export default {
  name: 'fee',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      },
    },
    value: {},
    disabled: Boolean,
    parameter: {
      type: Object,
      default: () => {
        return {}
      },
    },
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      options: [],
      readonly: false,
      selectData: null,
      checkedData: null,
    }
  },
  created() {
    this.readonly = Boolean(this.$route.query.readonly)
    eventBus.$on('serviceTypeChange', (val) => {
      this.$nextTick(() => {
        this.queryData(val)
      })
    })
    if (this.value) {
      this.setData()
    }
  },
  methods: {
    queryData(query) {
      nonStandardService
        .queryCostInfoByServiceType({ queryEvent: query, costState: 1 })
        .then((res) => {
          this.options = []
          this.options = res.data.amsPriceEventCostInfos
          if (this.options && this.options.length == 1) {
            this.checkedData = this.options[0].costCode
            this.changeData(this.checkedData)
          }
        })
    },
    changeData(val) {
      let info = this.options.find((it) => it.costCode == val) || {}
      this.selectData = `${info.costCode}${info.costName}`
      eventBus.$emit('feeChange', val)
      this.$emit('feeChange', val)
      this.$emit('input', String(this.checkedData))
    },
    setData() {
      let serviceType =
        this.data.serviceType.indexOf('{') === 0
          ? JSON.parse(this.data.serviceType)
          : {}
      this.queryData(serviceType.checkedData)
      this.selectData = JSON.parse(this.value).value
      this.checkedData = JSON.parse(this.value).checkedData
    },
    getData() {
      return {
        value: this.selectData,
        checkedData: this.checkedData,
      }
    },
  },
}
</script>
